<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="custom" tagdir="/WEB-INF/tags" %>
<%@ taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<html>
<head>
    <title>图片列表</title>
    <link href="${contextPath}/resources/css/bootstrap-datetimepicker.min.css" rel="stylesheet" media="screen">
    <link href="${contextPath}/resources/css/prettyPhoto.css" rel="stylesheet">
</head>
<body>

<div class="pageheader">
    <h2>图片列表</h2>
</div>
<div class="contentpanel">
    <form class="form-inline">
        <div class="btn-group mr12">
            <input class="form-control" name="name" value="${listDto.name}" placeholder="图片名称" type="text">
            <select class="form-control" name="extName" title="">
                <option value="">请选择类型</option>
                <c:forEach items="${listDto.allExtName}" var="item">
                    <option value="${item}" ${listDto.extName eq item?'selected="selected"':''}>${item}</option>
                </c:forEach>
            </select>

            <div class="input-group date form_date col-md-2">
                <input class="form-control start-time" name="startTime" size="16" type="text"
                       value="${listDto.startTime}" readonly
                       data-date="" data-date-format="yyyy-MM-dd" placeholder="开始时间"
                       data-link-field="dtp_input2" data-link-format="yyyy-mm-dd">
                <span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
            </div>
            <div class="input-group date form_date col-md-2">
                <input class="form-control end-time" name="endTime" size="16" type="text"
                       value="${listDto.endTime}"
                       readonly
                       data-date="" data-date-format="yyyy-MM-dd" placeholder="结束时间"
                       data-link-field="dtp_input2" data-link-format="yyyy-mm-dd">
                <span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
            </div>

            <select class="form-control" name="archive" title="">
                <option value="false" ${listDto.archive eq false?'selected="selected"':''}>启用</option>
                <option value="true" ${listDto.archive eq true?'selected="selected"':''}>禁用</option>
            </select>
        </div>
        <div class="btn-group mr12">
            <button type="submit" class="form-control btn-success">查询</button>
        </div>
    </form>

    <div class="row">
        <div class="col-sm-12">
            <div class="row filemanager">
                <c:forEach items="${listDto.list}" var="item" varStatus="status">
                    <div class="col-xs-6 col-sm-4 col-md-3 image">
                        <div class="thmb">
                                <%--<div class="ckbox ckbox-default" style="display: none;">--%>
                                <%--<input type="checkbox" id="check${status.index}" value="1">--%>
                                <%--<label for="check${status.index}"></label>--%>
                                <%--</div>--%>
                            <div class="btn-group fm-group" style="display: none;">
                                <button type="button" class="btn btn-default dropdown-toggle fm-toggle"
                                        data-toggle="dropdown">
                                    <span class="caret"></span>
                                </button>
                                <ul class="dropdown-menu fm-menu" role="menu">
                                        <%--<li><a href="#"><i class="fa fa-download"></i> Download</a></li>--%>
                                    <c:if test="${not item.archive}">
                                        <li>
                                            <a href="archive.htm?uuid=${item.uuid}&target=${not item.archive}">
                                                <i class="fa fa-ban"></i> 禁用
                                            </a>
                                        </li>
                                    </c:if>
                                    <c:if test="${item.archive}">
                                        <li>
                                            <a href="archive.htm?uuid=${item.uuid}&target=${not item.archive}">
                                                <i class="fa fa-check"></i> 启用
                                            </a>
                                        </li>
                                    </c:if>
                                </ul>
                            </div>
                            <!-- btn-group -->
                            <div class="thmb-prev">
                                <a href="${item.url}" data-rel="prettyPhoto">
                                    <img src="${item.url}" class="img-responsive" alt=""
                                         style="width:288px;height:216px;">
                                </a>
                            </div>
                            <h5 class="fm-title">
                                <a href="${item.url}" target="_blank"
                                   title="${item.originalFileName}">${item.shortFileName}</a>
                            </h5>
                            <small class="text-muted">${item.createTime}</small>
                            <c:if test="${item.archive}"><span class="label label-danger">已禁用</span></c:if>
                        </div>
                        <!-- thmb -->
                    </div>
                </c:forEach>
                <!-- col-xs-6 -->
            </div>
            <!-- row -->
            <custom:page page="${listDto}"/>
        </div>
    </div>
</div>
<script type="text/javascript" src="${contextPath}/resources/js/bootstrap-datetimepicker.js" charset="UTF-8"></script>
<script type="text/javascript" src="${contextPath}/resources/js/locales/bootstrap-datetimepicker.zh-CN.js"
        charset="UTF-8"></script>
<script src="${contextPath}/resources/js/jquery.prettyPhoto.js"></script>
<c:if test="${not empty param.dis}">
    <script type="text/javascript">
        jQuery.gritter.add({
            title: '启用/禁用完成!',
            class_name: "growl-success",
            sticky: false
        });
    </script>
</c:if>
<script type="text/javascript">
    jQuery(document).ready(function () {
        jQuery('.thmb').hover(function () {
            var t = jQuery(this);
            t.find('.ckbox').show();
            t.find('.fm-group').show();
        }, function () {
            var t = jQuery(this);
            if (!t.closest('.thmb').hasClass('checked')) {
                t.find('.ckbox').hide();
                t.find('.fm-group').hide();
            }
        });
        jQuery("a[data-rel^='prettyPhoto']").prettyPhoto();
    });
    $(function () {
        $(".end-time").click(function () {
            var startTime = $(".start-time").val();
            $('.end-time').datetimepicker('setStartDate', startTime);
        });
        $(".start-time").click(function () {
            var time = $(".end-time").val();
            $('.start-time').datetimepicker('setEndDate', time);
        });
        $(".glyphicon-remove").click(function () {
            var parents = $(this).parents(".input-group");
            var find = parents.find(".form-control");
            find.attr("value", "");
        });
    });

    $('.end-time,.start-time').datetimepicker({
        language: 'zh-CN',
        weekStart: 1,
        todayBtn: 1,
        autoclose: 1,
        todayHighlight: 1,
        startView: 2,
        minView: 2,
        forceParse: 0
    });
</script>

</body>
</html>
